<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chats</title>
    <meta name="csrf-token" content="{{ csrf_token }}" />
    <link href="static/bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="static/css/style.css" rel="stylesheet" />
  </head>
  <body style="background-color: rgb(51, 51, 51);">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/bootstrap-5.2.3-dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="static/js/main.js"></script>
    <script type="text/javascript" src="static/js/autoTextarea.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <h1 class="h1" style="background-color: rgb(255, 255, 255);text-align: center; ">Chats</h1>

    <div class="container-fluid">
      <div class="row">
        <div class="col-10">
            <pre style="white-space: pre-wrap;word-wrap: break-word;">
          <div>
            <div id="text" style="color:rgb(255,255,255)"></div>
            <div style="height :100% "></div>
          </div>
          </pre>
        </div>

        <div style="position:fixed;bottom:0;background-color:rgb(40,40,40);z-index:100">
          <form id="msgForm" onsubmit="return false" action="##">
            <div class="input-group mb-3" style="margin-left:15%;width :75%;margin-top : 3%">
              <textarea class="form-control" style="min-height:30px;max-height:300px;" rows="1" placeholder="Send a message..." id="prompt" type="text" name="msg" value=""></textarea>
              <button id="submit" class="btn btn-success" type="submit" onclick="submitMsg()">Send</button>
            </div>
            <br />
            <div style="text-align: center;color:rgb(255, 250, 71);">
            </div>
          </form>
        </div>
        <div class="col">
          <ul class="list-group">
            <li class="list-group-item list-group-item-info">
              <a id="tokens">{{ tokens }}</a><a>tokens used.</a>
              <a id="credits">{{ credits|floatformat:4 }}</a><a>CNY left</a>
              </li>
            <li class="list-group-item list-group-item-success">
              <a class="btn" href="/addCredit">兑换礼品码</a>
            </li>
            <li class="list-group-item list-group-item-warning">
              <a class="btn" href="/clear">清除历史信息</a>
            </li>
            <li class="list-group-item list-group-item-primary">
              <a class="btn" href="/getGPTSystems">切换其他机器人system</a>
            </li>
            <li class="list-group-item list-group-item-danger">
                <a class="btn" href="/logout">退出登陆</a>
              </li>
          </ul>
          <div style="height :20% "></div>
        </div>
      </div>
    </div>
    <script>
    var text = document.getElementById("prompt");

    autoTextarea(text,0,150);// 调用
    hljs.initHighlightingOnLoad()
    loadTemps()
    </script>
  </body>
</html>
